/**
* Add by LG 2024-12-12
* 品牌添加
*/
<template>
  <kdx-content-bar>
    <div class="good-brand-add">
      <div class="add-brand-content">
        <kdx-form-title>{{ type }}</kdx-form-title>
        <Form ref="form" :model="model" :rules="rules" :label-width="120">
          <FormItem label="品牌名称：" prop="name">
            <Input type="text" v-model="model.name" placeholder="请输入品牌名称" class="width-160" maxlength="100"/>
            <kdx-hint-text content="如果属于线上供货商类型的商品，品牌名称必须与供货商维护的商品品牌保持一致。"></kdx-hint-text>
          </FormItem>
          <FormItem v-if="!model.id" label="品牌编码：" prop="code">
            <Input type="text" v-model="model.code" placeholder="请输入品牌编码" class="width-160" maxlength="100"/>
            <kdx-hint-text content="建议采取拼音缩写输入（例大局：lh）"></kdx-hint-text>
          </FormItem>
          <FormItem label="简介备注：" prop="remark">
            <Input type="textarea" v-model="model.remark" placeholder="请输入简介备注" class="width-600"
                   maxlength="200" show-word-limit/>
          </FormItem>
        </Form>
      </div>
    </div>
    <template #btn>
      <Button class="primary-long" @click="handleSave">保存</Button>
      <Button class="default-long" @click="goBack">返回列表</Button>
    </template>
  </kdx-content-bar>
</template>

<script>

    export default {
        name: "index",
        data() {
            return {
                model: {
                    name: '',
                    code: '',
                    remark: ''
                },
                rules: {
                    name: [{
                        required: true,
                        message: '品牌名称必填'
                    }],
                    code: [{
                      required: true,
                      message: '品牌编码必填'
                    }],
                },
              id: 0,
              loading: false,
              type: '新增品牌'
            };
        },
        methods: {
            getData() {
                this.$api.goodsApi.getBrand({ id: this.id })
                    .then(res => {
                      if (res.error === 0) {
                        this.model = res.data
                      }
                    })
                    .catch()
            },
            handleSave() {
              this.$refs['form'].validate(valid => {
                if (valid) {
                  if (this.id) {
                    this.editBrand()
                  } else {
                    this.addBrand()
                  }
                }
              })
            },
            addBrand() {
              this.loading = true
              this.$api.goodsApi.addBrand(this.model).then(res => {
                this.loading = false
                if (res.error === 0) {
                  this.$Message.success('品牌新增成功')
                  this.$router.go(-1);
                }
              })
            },
            editBrand() {
              this.loading = true
              let params = Object.assign({}, this.model, { id: this.id })
              this.$api.goodsApi.editBrand(params).then(res => {
                this.loading = false
                if (res.error === 0) {
                  this.$Message.success('品牌修改成功')
                  this.$router.go(-1);
                }
              })
            },
            init() {
              this.id = this.$route.query.id || 0
              if (this.id) {
                this.getData()
                this.type = '修改品牌'
              } else {
                this.model = {
                  name: '',
                }
                this.type = '新增品牌'
              }
            },

            goBack() {
                this.$router.go(-1);
            }
        },
        mounted() {
            this.init();
        }
    };
</script>

<style scoped lang="scss">
.good-brand-add {
  background-color: #FFFFFF;
  min-height: 100%;
  position: relative;
  .add-brand-content {
    margin-top: 20px;
    background-color: #ffffff;
    height: 100%;
    padding: 40px;
    .goods-box {
      margin-top: 10px;
      border-radius: 2px;
      background-color: $background-color;
      padding: 20px;
      .goods-table {
        padding: 0 20px;
        background-color: #ffffff;
      }
    }
  }
  .footer-page {
    background-color: #ffffff;
    padding-top: 20px;
    display: flex;
    justify-content: center;
  }
}
</style>
